.narrator-box {
    // user-select: auto;
    .tab2 {
        display: none;
    }
    .con-box {
        .form {
            label {
                color: #676a6c;
            }
            .update-box {
                position: relative;
                .filebtn {
                    width: 100px;
                    height: 30px;
                    background-color: #f19149;
                    color: #fff;
                    text-align: center;
                    font-size: 14px;
                    line-height: 30px;
                    // border-radius:  4px;
                    .update {
                        display: none;
                    }
                }
            }
            .red {
                color: #ff5455;
            }
            .userImg-box {
                position: absolute;
                top: 0;
                left: 200px;
                height: 72px;
                .userImg {
                    height: 72px;
                }
            }
        }
        .form-inline {
            .form-group {
                margin-left: 20px;
                margin-top: 10PX;
            }
        }
        .btn-box {
            margin-top: 20px;
            display: flex;
            justify-content: flex-end;
            float: none;
            .btn {
                width: 240px;
                height: 40px;
                text-align: center;
                font-size: 18px;
                color: #fff;
                margin-right: 20px;
            }
            .submit {
                background-color: #1ab394;
            }
            .fabu {
                background-color: #62564a;
            }
        }
        .table-box {
            margin-top: 40px;
            color: #676a6c;
            width: 100%;
            .table-responsive {
                border-bottom: 1px solid #ddd;
                text-align: center;
                th {
                    text-align: center;
                }
            }
            .u_btn {
                color: #2b85e4;
                &:hover {
                    text-decoration: underline;
                }
            }
            .u_pager {
                display: flex;
                justify-content: flex-end;
            }
            .total {
                display: inline-block;
                height: 39px;
                line-height: 39px;
                margin: 20px 20px 20px 0;
            }
        }
        .job_entry {
            color: #676a6c;
            .panel-body {
                display: flex;
                flex-wrap: wrap;
                form {
                    .form-group {
                        label {
                            min-width:  128px;
                        }
                    }
                }
            }
            .full {
                width: 100%;
            }
            .select_narrator_box {
                // width: 100%;
                margin-right: -15px;
                margin-left: -15px;
                display: flex;
                flex-wrap: wrap;
                // position: relative;
                .w50 {
                    // width: 50%;
                    display: flex;
                    flex-wrap: wrap;
                    flex: 1;
                    text-align: center;
                }
                .u_span {
                    font-weight: bold;
                    text-align: right;
                    width: 10%;
                    max-width: 142px;
                    min-width: 134px;
                    margin-right: 30px;
                }
                .img-box {
                    width: 200px;
                    height: 280px;
                    border: 1px solid #dcdee2;
                    padding: 0;
                    overflow-y: auto;
                    border-radius: 4px;
                    .checkbox {
                        text-align: left;
                    }
                    .list-group {
                        margin: 0;
                        label {
                            width: 100%;
                        }
                    }
                }
                
                .symbol {
                    flex: 1;
                    text-align: center;
                    .symbol-item {
                        height: 50%;
                        box-sizing: border-box;
                        padding: 10px;
                        .cus {
                            display: inline-block;
                            border: 1px solid #aaa;
                            padding: 4px 10px;
                            border-radius: 4px;
                        }
                    }
                    .symbol-left{
                        display: flex;
                        justify-content: center;
                        align-items: flex-end;
                    }
                }
            }
            .btn-box {
                margin-top: 40px;
                text-align: left;
                width: 100%;
                justify-content: flex-start;
                .btn {
                    width: 200px;
                    height: 40px;
                    text-align: center;
                    font-size: 18px;
                    color: #fff;
                    margin-left: 30px;
                }
                .submit {
                    background-color: #1ab394;
                }
            }
        }
    }
    .modal {
        .modal-body {
            position: relative;
            .img-box {
                position: absolute;
                background-color: #fff;
                height: 166px;
                width: 126px;
                top: 16px;
                right: 16px;
                display: flex;
                justify-content: center;
                align-items: center;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }
        input {
            border: none;
        }
        label {
            margin: 0;
        }
    }
}

@media screen and (max-width: 900px) {
    .narrator-box .con-box .form-inline .form-group {
        margin-left: 0;
    }
}

@media screen and (max-width: 768px) {
    .narrator-box {
        .content {
            .tab {
                .title {
                    font-size: 16px;
                    padding: 10px;
                }
            }
            .job_entry .select_narrator_box .w50 {
                // margin-left: 20px;
                // width: 46%;
                // text-align: center;
                // div {
                //     margin: auto;
                // }
            }
        }
    }
}
@media screen and (max-width: 520px) {
    .narrator-box {
        .content {
            .tab {
                display: none;
            }
            .tab2 {
                display: block;
                margin-top: 20px;
                .navbar-toggle {
                    float: left;
                    margin-right: 0;
                }
                .navbar-toggle .icon-bar {
                    background-color: #fff;
                }
                .navbar-nav > li > a {
                    color: #aaa;
                }
                .nav > li > a.current {
                    background-color: #fff;
                    color: #666;
                }
                .navbar-brand {
                    color: #fff;
                }
                .navbar-collapse {
                    border-bottom: 1px solid rgba(255,255,255,.1);
                }
            }
            
            .con-box {
                margin-top: 10px;
                .btn-box {
                    text-align: center;
                }
                .job_entry .select_narrator_box {
                    // .w50 {
                    //     width: 100%;
                    //     margin-top: 20px;
                    //     margin-bottom: 10px;
                    //     .u_span {
                    //         width: 100%;
                    //         margin: 0;
                    //         text-align: center;
                    //         max-width: none;
                    //     }
                    // }
                    // .symbol {
                    //     width: 100%;
                    //     flex: none;
                    //     line-height: 20px;
                    //     transform: rotate(90deg);
                    // }
                }
                .btn-box {
                    justify-content: center;
                }
            }
        }
    }
}